import Log  from "../../utils/log.js"

const lg = new Log('pattern');
export default {
    data (){
        return {
            ctx: null,
            w: 360,
            h: 360,
            point_list: [],
            point_list_copy: [],
            result: [],
        }
    },
    props: {
        // 密码点半径[5-20]
        radius: {
            type: Number,
            default: 5,
        },
        // 热区范围[20-40]
        scope: {
            type: Number,
            default: 20,
        },
        // 密码点颜色
        pointColor: {
            type: String,
            default: '#383838',
        },
        // 密码点边框色
        pointStrokeColor: {
            type: String,
            default: '#ff9800',
        },
        // 激活密码点颜色
        activeColor: {
            type: String,
            default: '#ff9800',
        },
        // 密码线颜色
        lineColor: {
            type: String,
            default: '#1a73e8',
        },
        // 激活密码线颜色
        activeLineColor: {
            type: String,
            default: '#04be02',
        },
        // 是否显示密码线
        isShowLine: {
            type: Boolean,
            default: true,
        },

    },
    onPageShow(){
        this.radius = this.radius >= 20 ? 20 : this.radius <= 5 ? 5 : this.radius;
        this.scope = this.scope >= 40 ? 40 : this.scope <= 20 ? 20 : this.scope;
        this.initCanvas();
    },
    // 初始化画布
    initCanvas(){
        const c = this.$refs.canvas;
        this.ctx = c.getContext('2d', { antialias: true });
        this.createPoint();

    },
    // 创建9个密码点
    createPoint(){
        let point_x = Math.ceil((this.w - parseFloat(this.radius) * 6) / 4 + parseFloat(this.radius));
        let point_y = Math.ceil((this.h - parseFloat(this.radius) * 6) / 4 + parseFloat(this.radius));
        for (var j = 0; j < 3; j++) {
            for (var i = 0; i < 3; i++) {
                let d = {
                    x: point_x * (i + 1) + parseFloat(this.radius) * i,
                    y: point_y * (j + 1) + parseFloat(this.radius) * j
                }
                this.point_list.push(d);
                this.point_list_copy = [...this.point_list]
                this.drawPoint(d);
                //        绘制可控制区域
                //        this.drawR(d);
            }
        }
//        lg.log('9个密码点中心点位置：',this.point_list)

    },


    // 绘制9个密码点到画布上
    drawPoint(obj) {
        let {x, y} = obj;
        // 绘制外圆环
        this.ctx.beginPath();
        this.ctx.lineCap = "round"; //向线条的每个末端添加圆形线帽
        this.ctx.lineWidth = (parseFloat(this.radius) / 2);  //绘制圆的边框
        this.ctx.strokeStyle = this.pointStrokeColor; //绘制边框的颜色
        this.ctx.arc(x, y, parseFloat(this.radius), 0, 2 * Math.PI);
        this.ctx.stroke();
        this.ctx.closePath();

        // 绘制内圆
        this.ctx.beginPath();
        this.ctx.arc(x, y, parseFloat(this.radius), 0, 2 * Math.PI);
        this.ctx.fillStyle = this.pointColor;
        this.ctx.fill();
        this.ctx.closePath();
    },

    onTouchStart(e){
        let x = e.touches[0].localX;
        let y = e.touches[0].localY;
        this.isCollision(x, y)
    },
    onTouchMove(e){
        let x = e.touches[0].localX;
        let y = e.touches[0].localY;
        this.isCollision(x, y);
        this.ctx.clearRect(0, 0, this.w, this.h);
        this.reDraw(x, y, true);
    },
    onTouchEnd(e){
        this.ctx.clearRect(0, 0, this.w, this.h);
        this.reDraw(e.touches[0].clientX, e.touches[0].clientY, false);
//        lg.log('图案结果：',this.result)
        if(this.result.length > 0){
            this.$emit('resultCb', this.result)
        }
        this.result = [];
    },

    // 是否跟9个密码点发生接触。
    isCollision(x, y) {
        let c_x, c_y;
        for (let i in this.point_list) {
            c_x = Math.abs(x - this.point_list[i].x);
            c_y = Math.abs(y - this.point_list[i].y);
            // 如果发生碰撞，记录状态
            if (c_x < parseFloat(this.scope) && c_y < parseFloat(this.scope)) {
                //        lg.warn('发生了碰撞，碰撞点是：', i)
                this.drawStatus(i)
                return
            }
        }
    },
    //  绘制触摸到密码点的状态
    drawStatus(index) {
        this.ctx.beginPath();
        this.ctx.arc(this.point_list[index].x, this.point_list[index].y, (parseFloat(this.radius) / 2), 0, 2 * Math.PI);
        this.ctx.fillStyle = this.activeColor;
        this.ctx.fill();
        this.ctx.closePath();

        //记录缓存碰撞的结果
        if(this.result.indexOf(index) === -1){
            this.result.push(index)
        }
    },

    // 重绘
    reDraw(x, y, bol) {
        //    绘制跟随手势移动的密码点
        this.pointAn(x,y,bol);
        if(this.isShowLine){
            this.drawLine(this.result, x, y, bol); //画线
        }
        for (let i in this.point_list) {
            // 重新绘制9个密码点
            this.drawPoint(this.point_list[i]);
            //      this.drawR(this.point_list_copy[i]);
        }
        for (let i in this.result) {
            // 重新绘制密码状态
            this.drawStatus(this.result[i]);
        }

    },
    drawLine(arr, x, y, bol) {
        if(arr.length === 0){
            return;
        }
        // 当存在已经两个点的时候，两点直线形成连线
        this.ctx.beginPath();
        for (let i in arr) {
            if (i == 0) {
                this.ctx.moveTo(this.point_list[arr[i]].x, this.point_list[arr[i]].y);
            } else {
                this.ctx.lineTo(this.point_list[arr[i]].x, this.point_list[arr[i]].y);
            }
        }
        this.ctx.strokeStyle = this.lineColor;
        this.ctx.lineWidth = (parseFloat(this.radius) / 2);
        this.ctx.stroke();

        // 跟着手机滑动的线条
        if (bol) {
            this.ctx.beginPath();
            this.ctx.moveTo(this.point_list[arr[arr.length - 1]].x, this.point_list[arr[arr.length - 1]].y);
            this.ctx.lineTo(x, y);
            this.ctx.strokeStyle = this.activeLineColor;
            this.ctx.lineWidth = (parseFloat(this.radius) / 2);
            this.ctx.stroke();
        }
    },

    // 绘制状态point范围内活动
    pointAn(x, y, bol){
        if(bol){
            if(this.result.length === 0){
                return;
            }
            let t = this.result[this.result.length - 1];
            let r_x = Math.abs(x - this.point_list_copy[t].x);
            let r_y = Math.abs(y - this.point_list_copy[t].y);
            if(r_x < parseFloat(this.scope) && r_y < parseFloat(this.scope)){
                this.point_list[t] = {x,y}
            } else {
                this.point_list = [...this.point_list_copy];
            }
        } else {
            this.point_list = [...this.point_list_copy];
        }
    },

    // 绘制可控区域框
    drawR(obj){
        let {x, y} = obj;
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = '#fff'; //绘制边框的颜色
        this.ctx.strokeRect(x - parseFloat(this.scope), y - parseFloat(this.scope), parseFloat(this.scope) * 2, parseFloat(this.scope)* 2);
    },

    drawA(obj){
        let {x, y} = obj;
        // 绘制外圆环
        this.ctx.beginPath();
        this.ctx.lineCap = "round"; //向线条的每个末端添加圆形线帽
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = '#fff'; //绘制边框的颜色
        this.ctx.arc(x, y, parseFloat(this.scope), 0, 2 * Math.PI);
        this.ctx.stroke();
        this.ctx.closePath();
    },
}
